<template>
  <div :id="id" class="echartComponent"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name:'Echarts',
  props: ['id','options'],
  data() {
    return {
      myChart: null
    }
  },
  watch:{
    options:{
      handler(v){
        this.drawChart(this.id,v)
      },
      deep:true
    }
  },
  mounted () {
    // this.$nextTick(() => {
    //   this.drawChart(this.id,this.options)
    // })
  },
  methods: {
    drawChart(id,options) {
      let chart = document.getElementById(id);
      this.myChart = echarts.init(chart);
      this.myChart.clear();
      this.showLoading();
      // 绘制图表
      this.myChart.setOption(options);
      this.hideLoading();

      this.myChart.on('click', (params) => {
        this.$emit('seriesClick', params);
      });
      window.onresize = () => {
        this.myChart.resize();
      }
    },
    showLoading(){
      this.myChart.showLoading();
    },
    hideLoading(){
      this.myChart.hideLoading();
    }
  },
  beforeDestroy(){
    if(this.myChart){
      this.myChart.dispose();
    }
  }
}
</script>
<style lang='less' scoped>
.echartComponent{
  width: 100% !important;
  height: 100% !important;
}
</style>

